<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    const {index, value} = obj  // 

    const index = obj.index
    const value = obj.value


   -->
  <div id="app">
    <child :arr="arr">
      <template slot-scope="{index, value}">{{index}} - {{value}}</template>
    </child>

    <child :arr="arr"></child>
    <child :arr="arr">
      <h5 slot-scope="{value}">{{value}}</h5>
    </child>


  </div>
  <script src="./vue.js"></script>
  <script>
    /* 
      有可能用户在使用child这个组件时，根本不知道内部代码是什么，只看到了创建者提供的文档

      属性
        arr 传入一个数组，那么会渲染成ul li的形式 li中显示每一个值

      child slot
        index 表示下标
        value 表示遍历出的内容

      如果用户想要得到index
      

      作用域插槽中不想新增标签的时候，就用
      <template slot-scope="{属性1, 属性2, 属性n}"></template>
    
     */
    const child = {
      template: `
        <ul>
          <li v-for="(value, index) in arr">
            <slot :index="index" :value="value">{{value}}</slot>
          </li>
        </ul>
      `, 
      props: {
        arr: Array
      }
    }
    Vue.component('child', child)

    const app = new Vue({
      el: '#app',
      data: {
        arr: [1,2,34,4,56,544,7,5,84,76,423]
      }
    })
  
  </script>
</body>
</html>